<template>
  <div class="plusReduce">
    <div class="reduce iconfont icon-jian" @click="reduce()"></div>
    <div class="inputNum">{{num}}</div>
    <div class="plus iconfont icon-hao" @click="plus()"></div>
  </div>
</template>

<script>
export default {
  props:{
    listType:{
        type:String,
        default:''
    },
    // 索引，方便区分
    index:{
        type:Number,
        default:null
    },
    // 传进来的初始化值
    buyNum:{
        type:Number,
        default:0
    },
    // 是否限制最大数值,默认不限制
    limitNum:{
        type:Boolean,
        default:false
    },
    // 限制最大调整数量
    maxNum: {
        type:Number,
        default:1000
    }
},
  data() {
    return {
      num: 0
    };
  },

  components: {},

  methods: {
    plus() {
      if(this.limitNum){
          if(this.num>=this.maxNum){
              return;
          }else{
                this.num += 1;
                let obj = {
                    listType:this.listType,
                    index:this.index,
                    num:this.num
                }
                this.$emit("getNum", obj);
          }
      }else{
            this.num += 1;
            let obj = {
                listType:this.listType,
                index:this.index,
                num:this.num
            }
            this.$emit("getNum", obj);
      }
      
    },
    reduce() {
      if (this.num == 0) {
        return;
      } else {
        this.num -= 1;
      }
      let obj = {
          listType:this.listType,
          index:this.index,
          num:this.num
      }
      this.$emit("getNum", obj);
    }
  },

  computed: {
      getNum(){
          if(this.buyNum!=null|| this.buyNum!=undefined){
              this.num = this.buyNum;
          }
      }
  },
 watch:{
     getNum(a,b){
         console.log(a);
         
     }
 },
  mounted() {}
}
</script>

<style lang='less'>

.plusReduce {
  display: flex;
  .iconfont {
    width: 30px;
    flex: 0 0 30px;
    font-size: 16px;
    color: #909399;
  }
  .inputNum {
    width: 35px;
    font-size: 15px;
    flex: 0 0 35px;
    margin: 0 5px;
    // color: $color-theme;
  }
  & > div {
    background: #f5f8fc;
    text-align: center;
    height: 20px;
    line-height: 20px;
    // border-radius: $border-radius;
  }
}
</style>